<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化</title>
		<style>
			/* 控制字体：字体家族属性 */
			{
				/* font-family指定字体,常用：微软雅黑、宋体 */
				font-family: 微软雅黑 ;
				/* 用户电脑端可能不存在指定字体，按照顺序再指定一个字体，如果存在，就选定
				 sans-serif 无衬线字体，理解：黑体
				 */
				
			/* 字体尺寸属性    PX单位：绝对值
			                 em单位：相对于父元素字体大小 倍数【移动端】
			 */
				font-size: 1.5em;
				/* 字体加粗属性：属性值【数值整数范围：100~900】   400等于1normal
				               属性值【英文：normal、bold】      900等于bold
				 */
				font-weight: 100;
				/* 字体样式属性 */
				font-style: italic;
				/* 文本转换属性:转大写uppercase、lowercase转小写、capitalize首字母大写 */
				text-transform: ;
				text-transform: capitalize;
				/* 首行缩进 属性*/
				text-indent: 200px;
			}
			/* 2.控制文本属性 */
			h1+p{
				border: 1px solid red;
				/* text-algin文本对齐属性：left\right\center【具备宽度空间】
				                         justify[文本内容足够，两端对齐]
				 */
				text-align: justify;
				/* line-height行高属性：数值px 主要功能：文本垂直居中，高度与行高一致 */
				height: 40px;
				line-height: 40px;
				/* letter-spacing：[正负]数值px  设置字符间距 */
				letter-spacing: 10px;
				/* word-spacing:[正负]数值px,    设置单词间距     */
			}
			/* 3.文本装饰效果属性 */
			div a{
				border: 1px solid #ccc;
				padding: 8px;
				margin-left: 5px;
				border-radius: 3px;
			}
			div a.current{
				/* 加权重 */
				border: 10;
				color: #000;
				/* text-decoration超文本装饰属性 :  none去掉下划线
				                                  underline 默认 自带下划线
												  line-through 删除线*/
				text-decoration: none;
				
			}
			div p{
				/* 文本阴影属性 【阴影三种：过滤：下阴影、文本阴影、盒子阴影】 */
				/*             X  Y   模糊程度  颜色 */
				
				text-shadow: 5px 5px 10px #aaffff;
			}
			/* 4.处理文本换行属性*/
			div>span{
				/* white-space: 文本换行属性：nowrap 不换行
				                             pre 保留空格与换行
											 normal  默认情况，空格合并*/
				border: 1px solid red;
				white-space: nowrap;
				white-space: pre;
			}
			
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上出现的文本或字体
		 4种用途：*控制字体：font-family、font-size、font-weight等
		        *控制文本布局：text-align、line-height[行高]、letter-spacing等
				*控制文本修饰效果:text-decoration、text-shadow等
				*处理文本溢出与换行：overflow、white-space等
		 -->
		 <h1>控制字体属性：font-family、font-size</h1>
		 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum quibusdam minima eos, nam molestias sit, tenetur, architecto hic voluptatum aliquid perspiciatis soluta magni provident voluptatem sapiente atque quo quis explicabo!
	<h1>控制文本布局：text-algin</h1>
	<h1>文本装饰效果</h1>
	<div>
		<a href="#" class="">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<p>文本阴影效果</p>
		
		
	</div>
	<p>Lorem </p>
	<h1>处理文本溢出与换行</h1>
	<div>
		<span>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid soluta blanditiis? Sapiente inventore repellat doloremque dolore rem officiis possimus labore delectus numquam, natus beatae commodi illum voluptatum tempora autem.
	   </span>
	</div>
	</body>
</html>